<template>
  <div>
    <li v-if="userTaskItem.length === 0" class="empty">暂无数据</li>
    <li v-else class="todo-item" v-for="item in userTaskItem" :key="item.id">
      <input
        type="checkbox"
        @change="changeCheckedToDoItem(item.id)"
        :checked="item.done"
      />
      {{ item.value }}
      <button class="del-item" @click="delToDoListItemById(item.id)">
        删除
      </button>
    </li>
  </div>
</template>

<script lang="ts">
import { inject } from 'vue'

export default {
  name: 'Item',
  setup(props:any, { emit }:any) {
    let userTaskItem = inject('userTaskItem')

    /* 删除当前任务 */
    function delToDoListItemById(id:number) {
      if (!confirm('确认要删除该任务吗?')) return
      emit('delToDoListItemById', id)
    }

    /* 改变当前任务选中状态 */
    function changeCheckedToDoItem(id:number) {
      emit('changeCheckedToDoItem', id)
    }

    return {
      userTaskItem,
      delToDoListItemById,
      changeCheckedToDoItem,
    }
  },
}
</script>

<style scoped>
section ul li {
  position: relative;
  height: 45px;
  line-height: 45px;
  padding: 0 10px;
  box-sizing: border-box;
  border-bottom: 1px solid #e9e9e9;
  border-radius: 5px;
  list-style: none;
}

section ul li:last-of-type {
  border-bottom: none;
}

section ul:nth-last-child(1) {
  border-bottom: none;
}

section ul li:hover {
  background-color: rgb(235, 234, 234);
  cursor: pointer;
}

section ul li input {
  margin-right: 10px;
}

section ul li button {
  position: absolute;
  top: 10px;
  right: 10px;
  height: 30px;
  padding: 0 10px;
  line-height: 30px;
  color: #fff;
  background-color: #d5514c;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}
</style>